<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/cityLayout.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/registe.css"/>
    <style>
        #main .container .registe input {
            width: 80%;
        }

    </style>
</head>
<body style="background:#fff;">
<div id="registe">
    <header id="head">
        <div class="head-middle">
            <div class="container row">
                <h1 class="col-md-3 col-sm-4">
                    <img src="img/logo.jpg" />
                </h1>
                <div class="col-md-5 col-sm-4 logo2">
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="right">
                        <img src="img/search.jpg" alt="" />
                        <input type="text" placeholder="请输入您要搜索的关键词"/>
                        <button>搜索</button>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section id="main">
        <div class="container row freeuser" v-if="indexshow">
            <div class="col-md-8 col-sm-8">
                <div class="registe">
                    <div class="registe-tle">
                        用户注册
                    </div>
                    <div>
                        <span>手机号:</span>
                        <input type="text" placeholder="建议常用手机" v-model="phone"/><span style="color: #bd362f;position: relative;" v-text="phoneErrInfo"></span>
                    </div>
                    <div class="mobileYzm">
                        <span>手机验证码:</span>
                        <input type="text" placeholder="请输入手机验证码" v-model="code"/>
                        <button @click="getyzm()">获取验证码</button>

                    </div>
                    <div>
                        <span>设置密码:</span>
                        <input type="text" placeholder="建议至少使用两种字符组合" v-model="passWord"/>
                    </div>
                    <button @click="registenow">立即注册</button>
                </div>
            </div>

        </div>

    </section>
    <footer id="foot">
        <div class="container">
            <div class="foot-middle">
                <div>
                    <img src="img/we.png" alt="" />
                    <ul>
                        <li>帮助中心</li>
                        <li><a href="JavaScript:;">平台政策</a></li>
                        <li><a href="JavaScript:;">商家入驻</a></li>
                    </ul>
                </div>
                <div>
                    <img src="img/we.png" alt="" />
                    <ul>
                        <li>关于我们</li>
                        <li><a href="JavaScript:;">了解嗅色</a></li>
                        <li><a href="JavaScript:;">加入嗅色</a></li>
                        <li><a href="JavaScript:;">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <img src="img/we.png" alt="" />
                    <ul>
                        <li>配送与支付</li>
                        <li><a href="JavaScript:;">到体验厅支付</a></li>
                        <li><a href="JavaScript:;">支付方式说明</a></li>
                        <li><a href="JavaScript:;">配送费用查询</a></li>
                        <li><a href="JavaScript:;">配货发货时间</a></li>
                    </ul>
                </div>
                <div>
                    <img src="img/we.png" alt="" />
                    <ul>
                        <li>服务保证</li>
                        <li><a href="JavaScript:;">售后服务条款</a></li>
                        <li><a href="JavaScript:;">产品质量保证</a></li>
                        <li><a href="JavaScript:;">发票制度说明</a></li>
                        <li><a href="JavaScript:;">关于假一赔万</a></li>
                    </ul>
                </div>
                <div>
                    <img src="img/we.png" alt="" />
                    <ul>
                        <li>关于我的</li>
                        <li><a href="JavaScript:;">资金管理</a></li>
                        <li><a href="JavaScript:;">我的收藏</a></li>
                        <li><a href="JavaScript:;">我的订单</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="foot-bottom">
            <span>Copyright&nbsp;2017.XIUSE.COM</span>
            <span>北京又有科技有限公司</span>
            <span>京ICP备13088531号</span>
        </div>
    </footer>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript">
    $(function(){
        var vm=new Vue({
            el:"#registe",
            data:{
                indexshow:true,
                phone:"",
                phoneErrInfo:"",
                code:"",
                passWord:""
            },
            methods:{

                //用户注册
                design:function(){
                    this.indexshow=false;
                    this.supplyshow=false;
                    this.designshow=true;
                    this.serviceshow=false;
                },

                //获取验证码
                getyzm:function(){

                    if(this.phone==""){
                        this.phoneErrInfo="手机号不能为空";
                        return false;
                    }else{
                        this.phoneErrInfo="";
                    }

                    var timer = null;
                    if($(".mobileYzm button").html()!="获取验证码"){
                        return;
                    }
                    clearInterval(timer);
                    $(".mobileYzm button").html("60"+"s");
                    var second = 60;
                    timer = setInterval(function(){
                        second -= 1;
                        if(second >0 ){
                            $(".mobileYzm button").html(second+"s");
                        }else{
                            clearInterval(timer);
                            $(".mobileYzm button").html("获取验证码");
                        }
                    },1000);
//							var mobile=$(".mobile").val();
//							vm.yanzhenma.mobile=mobile;
//							var param = JSON.stringify(vm.yanzhenma);

                    $.ajax({
                        url:"/sendPhoneCode.htmls",
                        type:"post",
                        data:{"phone":this.phone},
                        dataType:"json",
                        success:function(d){
                            if(d.code==0){
                                alert("成功");
                            }else{
                                alert("失败");
                            }
                        }
                    })
                },
                //点击立即注册
                registenow:function(){
                    $.ajax({
                        url:"/regUser.htmls",
                        type:"post",
                        data:{"code":this.code,"phone":this.phone,"passWord":this.passWord},
                        dataType:"json",
                        success:function(d){
                            if(d.code==0){
                                window.location.href = "/login.htmls";
                            }else{
                                //如果code输入有误，应该提示
                                //<span>
                            }
                        }
                    })
                }
            }
        });


    })

</script>
</body>
</html>
